<template>
  <div>
    <!-- 添加 -->
    <el-form
      :model="form"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-col :span="12" :offset="0">
        <el-form-item label="父菜单" prop="ParentId">
          <el-cascader
            v-model="form.ParentId"
            :options="options"
            placeholder="默认一级菜单"
            :props="{
              value: 'MenuId',
              label: 'MenuName',
              children: 'Children',
              checkStrictly: true,
              expandTrigger: 'hover',
            }"
            style="width: 100%"
            clearable
          ></el-cascader>
        </el-form-item>
      </el-col>
      <el-col :span="12" :offset="0">
        <el-form-item label="菜单名称" prop="MenuName">
          <el-input v-model="form.MenuName"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12" :offset="0">
        <el-form-item label="菜单类型" prop="MenuType">
          <el-radio-group v-model="form.MenuType">
            <el-radio
              v-for="item in menuType"
              :key="item.MenuType"
              :label="item.MenuType"
              >{{ item.TypeName }}</el-radio
            >
          </el-radio-group>
        </el-form-item>
      </el-col>
      <el-col :span="12" :offset="0">
        <el-form-item label="路由名称" prop="RouteName">
          <el-input v-model="form.RouteName"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12" :offset="0">
        <el-form-item label="路由路径" prop="RoutePath">
          <el-input v-model="form.RoutePath"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12" :offset="0">
        <el-form-item label="组件路径" prop="ComponentPath">
          <el-input v-model="form.ComponentPath"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12" :offset="0">
        <el-form-item label="图标" prop="Icon">
          <el-input v-model="form.Icon"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12" :offset="0">
        <el-form-item label="权限" prop="Permission">
          <el-input v-model="form.Permission"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="24" :offset="0">
        <el-form-item label="备注" prop="Remark">
          <el-input
            type="textarea"
            :rows="3"
            placeholder="请输入内容"
            v-model="form.Remark"
          >
          </el-input>
        </el-form-item>
      </el-col>
    </el-form>
  </div>
</template>
<script>
import { GetNodes } from "../../apis/menu";
import { Add } from "../../apis/menu";
export default {
  //数据
  data() {
    return {
      form: {
        MenuName: "",
        MenuType: 0,
        RouteName: "",
        RoutePath: "",
        ComponentPath: "",
        Icon: "",
        Permission: "",
        Remark: "",
        ParentId: "",
      },
      options: [],
      rules: {
        MenuName: [
          { required: true, message: "请输入菜单名称", trigger: "blur" },
        ],
        RouteName: [
          { required: true, message: "请输入路由名称", trigger: "blur" },
        ],
        RoutePath: [
          { required: true, message: "请输入路由路径", trigger: "blur" },
        ],
        ComponentPath: [
          { required: true, message: "请输入组件路径", trigger: "blur" },
        ],
        Icon: [{ required: true, message: "请输入图标", trigger: "blur" }],
        Permission: [
          { required: true, message: "请输入权限", trigger: "blur" },
        ],
        Remark: [{ required: true, message: "请输入备注", trigger: "blur" }],
      },
    };
  },
  //父传子数据
  props: {
    menuType: {
      type: Array,
    },
  },

  //回调函数
  mounted() {
    this.LoadNodes();
    console.log(this.options);
  },
  //方法
  methods: {
    //添加
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let _this = this;
          this.form.ParentId = this.form.ParentId.slice(-1)[0];
          console.log(this.form.ParentId);
          Add(this.form).then((res) => {
            if (res.Code == 0) {
              this.$message({
                message: "添加成功",
                type: "success",
                onClose: function () {
                  _this.$emit("onAddSuccess");
                },
              });
            } else {
              this.$message.error(res.Message);
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //显示级联
    LoadNodes() {
      GetNodes().then((m) => {
        this.options = m.Data;
      });
    },
  },
};
</script>
<style>
</style>